<template>
  <el-form :inline="true" :model="formInline" ref="ruleFormRef" class="demo-form-inline" label-width="150px"
    :rules="rules" :disabled="disabled">
    <el-form-item label="地区:" prop="areaOption">
      <mySelect placeholder="请选择地区" :options="areaOption" v-model="formInline.areaCode" />
    </el-form-item>
    <el-form-item label="机构名称:">
      <el-input v-model="formInline.institutionName" placeholder="请输入机构名称" />
    </el-form-item>
    <el-form-item label="资质等级:">
      <mySelect placeholder="请选择资质等级" :options="allOptionLsit.institutionLevel" v-model="formInline.direction" />
    </el-form-item>
    <el-form-item label="证书编号:">
      <el-input v-model="formInline.certificateNo" placeholder="请输入证书编号" />
    </el-form-item>
    <el-form-item label="证书有效期:">
      <el-date-picker v-model="formInline.certificateValidityDate" type="date"  format="YYYY/MM/DD"
      value-format="YYYY-MM-DD"  placeholder="请选择证书有效期"  />
    </el-form-item>
    <el-form-item label="详细地址:">
      <el-input v-model="formInline.address" placeholder="请输入详细地址" />
    </el-form-item>

    <div style="display: flex; justify-content: center">
      <el-button type="primary" @click="dialogConfirm(ruleFormRef, 'institutionRandom/benchAddInstitutionRandomDo', addOrupdate)"
        v-if="addOrupdate">确定</el-button>
      <el-button type="primary" @click="dialogConfirm(ruleFormRef, 'institutionRandom/updateInstitutionRandomDo', addOrupdate)"
        v-else="addOrupdate">编辑</el-button>
    </div>
  </el-form>
</template>


<script setup>
import { useTable } from "@/utils/hook";
import { onMounted } from "vue";
import mySelect from "@/components/element/mySelect.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { generalRequestGet, generalRequestPost} from '@/api/home.js'

const { formInline, optionProps, areaCode, cityChange, ruleFormRef, cityCode, countyCode,
  townCode, getAllOptionList, allOptionLsit,areaOption,getareaOption } = useTable()
const props = defineProps({
  rowData: {
    type: Object,
  },
  addOrupdate: {
    type: Boolean,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['closeDialog'])

let carOptions = ref([])
const rules = ref([])
onMounted(() => {
  getAllOptionList('institutionLevel', 'institutionLevel')
  getareaOption()
  const { rowData, addOrupdate, } = props
  if (!addOrupdate) {
    formInline.value = { ...rowData }
    console.log(formInline.value,'formInline.value')
  }
})
// 弹窗新增或者修改
const dialogConfirm = async (formEl, url, updateOrAdd) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      generalRequestPost(url, formInline.value).then((res) => {
        if (res.code == 1000) {
          ElMessage({
            message: updateOrAdd ? "新增成功" : "编辑成功",
            type: "success",
          });
          emit("closeDialog");
          formInline.value = {};
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

</script>

<style lang="less" scoped>
:deep(.el-input) {
  width: 200px;
}

:deep(.el-select) {
  height: 33px;
  width: 200px;
}

:deep(.el-cascader) {
  height: 30px;
  margin-right: 10px;
}
</style>